<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
	xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
	layout:decorate="~{layout.html}">

<head>
<base th:href="@{/}">
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>列表页</title>
<link rel="stylesheet" th:href="@{/css/icons.css}" />
<link rel="stylesheet" th:href="@{/css/style.css}" />
<link rel="stylesheet" th:href="@{/css/element.css}" />
<script type="text/javascript" th:src="@{/common/jquery/1.12.4/jquery.min.js}"></script>
<script type="text/javascript" th:src="@{/common/jedate/jedate.js}"></script>
</head>

<body>
	<div layout:fragment="content">
		
			<div class="row">
				<div class="col-12 grid-margin">
				<div class="card">
					<form id="queryForm" name="queryForm" method="post">
						<div class="card-body">
						<div class="row">
							<div class="col-md-4">
		                      <div class="form-group row">
		                        <label class="col-sm-3 col-form-label">业务类型</label>
		                        <div class="col-sm-9">
		                          <select class="form-control" id="busType" name="busType">
		                          	<option value="">全部</option>
		                            <option th:each="item : ${busTypeOption}" th:value="${item.code}" th:text="${item.msg}" th:selected="${item.code==zlogDTO.busType}"></option>
		                          </select>
		                        </div>
		                      </div>
		                    </div>
		                    
							<div class="col-md-4">
		                      <div class="form-group row">
		                        <label class="col-sm-3 col-form-label">业务编码</label>
		                        <div class="col-sm-9">
		                        	<input class="form-control" type="text" id="busCode" name="busCode"  th:value="${busCode}">
<!-- 		                          <select class="form-control" id="busCode" name="busCode"> -->
<!-- 		                          	<option value="">请选择</option> -->
<!-- 		                            <option th:each="item : ${busTypeOption}" th:value="${item.code}" th:text="${item.msg}" "></option> -->
<!-- 		                          </select> -->
		                        </div>
		                      </div>
		                    </div>
		                    
		                    
		                    
					  		<div class="col-md-4">
		                      <div class="form-group row">
		                        <label class="col-sm-3 col-form-label">处理类型</label>
		                        <div class="col-sm-9">
		                          <select class="form-control" id="type" name="type">
		                          	<option value="">全部</option>
		                            <option th:each="item : ${typeOption}" th:value="${item.code}" th:text="${item.msg}" th:selected="${item.code==zlogDTO.type}"></option>
		                          </select>
		                        </div>
		                      </div>
		                    </div>
					  		<div class="col-md-4">
		                      <div class="form-group row">
		                        <label class="col-sm-3 col-form-label">处理结果</label>
		                        <div class="col-sm-9">
		                          <select class="form-control" id="status" name="status">
		                          	<option value="">请选择</option>
		                            <option th:each="item : ${statusOption}" th:value="${item.code}" th:text="${item.msg}" th:selected="${item.code==zlogDTO.status}"></option>
		                          </select>
		                        </div>
		                      </div>
		                    </div>
							<div class="col-md-3">
								<button type="submit" class="btn btn-primary mr-2">查询</button>
<!-- 								<button type="reset" class="btn btn-light">重置</button> -->
								<button type="button" class="btn btn-light" onclick="clean()">重置</button>
							</div>
						</div>
						</div>
					</form>
					<script type="text/javascript">
					 function clean(){
						 $("#queryForm .row input").val('');
						 $("#queryForm .row select").val('');
					 }
				    
					</script>
				</div>
				</div>
			</div>
			<div class="col-md-12 stretch-card">
				<div class="card">
				<div class="card-body">
				<div class="table-responsive">
				<div id="recent-purchases-listing_wrapper"
					class="dataTables_wrapper container-fluid dt-bootstrap4 no-footer">
				<div class="row">
				<div class="col-sm-12">
					<table id="recent-purchases-listing"
						class="table dataTable no-footer" role="grid">
						<thead>
							<tr role="row">
								<th>序号</th>
								<th>业务类型</th>
								<th>任务ID</th>
								<th>业务编码</th>
								<th>处理类型</th>
								<th>处理结果</th>
								<th>操作人</th>
								<th>操作时间</th>
								<th>备注</th>
								
							</tr>
						</thead>
						<tbody >
							<tr role="row" class="odd" th:each="item,it : ${pageInfo.list}">
								<td th:text="${item.index}">1</td>
								<td th:text="${item.busTypeDesc}">1</td>
								<td th:text="${item.busId}">1</td>
								<td th:text="${item.busCode}">1</td>
								<td th:text="${item.typeDesc}">1</td>
								<td th:text="${item.statusDesc}">1</td>
								<td th:text="${item.optUser}">1</td>
								<td th:text="${#dates.format(item.optTime,'yyyy-MM-dd HH:mm:ss')}">2022/06/01 10:40:00</td>
								<td th:text="${item.remark}">1</td>
							</tr>
						</tbody>
					</table>
					<div class="bd-example">
					<form class="form-sample" id="pageForm" method="post" action="handle/log">
						<page aria-label="Page navigation example">
						<input type="hidden" name="page_num" id="page_num" value="1" class="form-control">
						<input type="hidden" name="page_size" id="page_size" value="10" class="form-control">
						
						<ul class="pagination justify-content-center">
							<li class="page-item" th:classappend="${pageInfo.isFirstPage} ? 'disabled' : ''">    <a class="page-link" href="#" th:onclick="'javascript:goPage('+1+');return false;'">首页</a></li>
							<li class="page-item" th:classappend="${pageInfo.hasPreviousPage} ? '' : 'disabled'"><a class="page-link" href="#" th:onclick="'javascript:goPage('+${pageInfo.prePage}+');return false;'">上一页</a></li>
							<li class="page-item" th:classappend="${pageInfo.hasNextPage } ? '' : 'disabled'">   <a class="page-link" href="#" th:onclick="'javascript:goPage('+${pageInfo.nextPage}+');return false;'">下一页</a></li>
							<li class="page-item" th:classappend="${pageInfo.isLastPage} ? 'disabled' : ''" >    <a class="page-link" href="#" th:onclick="'javascript:goPage('+${pageInfo.pages}+');return false;'">尾页</a></li>
							<li class="page-item" disabled><a class="page-link">
							第<span th:text="${pageInfo.pageNum}+'/'+${pageInfo.pages}">1/10</span>页，
							共<span th:text="${pageInfo.total}">100</span> 条</a></li>
						</ul>
						</page>
					</div>
				</form>
				
				<script type="text/javascript">
					function goPage(pageNum){
						if(pageNum){
							$("#page_num").val(pageNum);
						}
						$("#pageForm").submit();
						
					}
					var ParaModule=function(serializeArray){
						this.serializeArray=serializeArray
					}
					ParaModule.prototype.getElement=function(){
						var element,name,value,inputElement,html;
						
						element=document.createElement("div");
						element.className="module paraModule"
						for(var i in this.serializeArray){
							name=this.serializeArray[i].name;
							value=this.serializeArray[i].value;
							html="<input type=\"hidden\" name=\""+name+"\" value=\""+value+"\" />" //不使用node.name='aa'方式，避免低版本ie转化为submitName属性
							inputElement=$(html).get(0)
							element.appendChild(inputElement);
						}
						
// 						inputElement=document.createElement("input");
// 						inputElement.type="submit"
// 						element.appendChild(inputElement);
						
						return element;
					}
					$(document).ready(function(){
						var serializeArray=$("#queryForm").serializeArray()
						paraModule=new ParaModule(serializeArray);
						element=paraModule.getElement();
						var listForm=document.getElementById("pageForm")
						listForm.insertBefore(element,listForm.firstChild);
					})
				</script>
				</div>
				</div>
				</div>
				</div>
				</div>
				</div>
			</div>
	</div>
</body>
</html>